<template>
	<view style="background-color: #f7f7f7">
		<view class="top">
			<view class="card">
				<view class="input_line">
					<text>负责人：</text>
					<input class="input" v-model="form.director" type="text" placeholder="输入负责人姓名" />
				</view>
				<view class="input_line">
					<text>身份证号码：</text>
					<input class="input" v-model="form.idCard" type="text" placeholder="输入负责人身份证号码" />
				</view>
				<view class="input_line">
					<text>手机号：</text>
					<input class="input" type="text" v-model="form.mobile" placeholder="输入手机号" />
				</view>
				<view class="input_line">
					<text>验证码：</text>
					<view class="input" style="color: gray; margin: 0; height: 30rpx; width: 290rpx; display: flex; justify-content: space-between; align-items: center">
						<input style="font-size: 20rpx; width: 160rpx" type="text" placeholder="输入验证码" />
						|
						<text style="color: #4c8efe; padding: 5rpx">获取验证码</text>
					</view>
				</view>
				<view class="input_line">
					<text>店名：</text>
					<input class="input" type="text" v-model="form.name" placeholder="输入店名" />
				</view>
				<view class="input_line">
					<text>工商营业执照号码：</text>
					<input class="input" type="text" v-model="form.businessLicenseId" placeholder="输入营业执照号码" />
				</view>
				<view class="input_line">
					<text>经营区域：</text>
					<input class="input" type="text" v-model="form.operatingArea" placeholder="选择区县" />
				</view>
				<view class="input_line">
					<text>地址：</text>
					<input class="input" type="text" v-model="form.address" placeholder="输入详细地址" />
				</view>
			</view>
		</view>
		<view style="height: 400rpx"></view>
		<view class="card">
			<view class="big_title">商家介绍</view>
			<textarea
				style="margin: 20rpx; padding: 10rpx; height: 200rpx; border: 1px solid gray; border-radius: 15px"
				v-model="form.description"
				placeholder="请准确介绍一下公司"
			></textarea>
		</view>
		<view class="card">
			<view class="big_title">身份证证正反面照片</view>
			<view style="margin: 20rpx; display: flex; justify-content: space-around; align-items: center">
				<image v-if="form.front" :src="form.front" class="image"></image>
				<button v-else @click="up(1)">上传文件</button>
				<image v-if="form.opposite" :src="form.opposite" class="image"></image>
				<button v-else @click="up(2)">上传文件</button>
			
			</view>
		</view>
		<view class="card">
			<view class="big_title">营业执照</view>
			<image v-if="form.businessLicenseImg" :src="form.businessLicenseImg" class="image"></image>
			<button v-else @click="up(3)">上传文件</button>
		</view>
		<view class="card">
			<view class="big_title">门面照片</view>
			<view v-if="form.facadePhoto" style="width: 100%;display: flex;align-items: center;justify-content: space-around;flex-wrap: wrap;">
				<image  v-for="(item,index) in form.facadePhoto" :key="index" :src="item" class="image"></image>
			</view>
			<button v-if="form.facadePhoto.length<9" @click="up(4)">上传文件</button>
		</view>
		<button @click="onLogin()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white">注册</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import uploadFile from '../../utils/uploadFile';
import request from '../../utils/request'

let form = ref({
	mid: null,
	director: null,
	idCard: null,
	mobile: null,
	businessLicenseId: null,
	businessLicenseImg:null,
	front: null,
	opposite:null,
	name: null,
	operatingArea: null,
	regTime: null,
	startTime: null,
	endTime: null,
	address: null,
	longitude: null,
	latitude: null,
	description: null,
	rate: null,
	status: 0,
	del: 0,
	auditStatusId: 0,
	facadePhoto: []
});
function up(e) {
	uploadFile({
		
		success(res) {
			// console.log("上传",res);
			switch (e) {
				case 1:
					form.value.front = res[0];
					break;
				case 2:
					form.value.opposite =  res[0];
					break;
				case 3:
					form.value.businessLicenseImg =  res[0];
					break;
				case 4:
					// form.value.facadePhoto=[...form.value.facadePhoto,...res]
					
					res.forEach(item=>form.value.facadePhoto.push(item))
					break;
				default:
					break;
			}
		},
		fail(err){
			console.log(err);
		}
	});
}
function onLogin() {
	
request({
	url:'auth/MerchantRegister',
	method:'post',
	data:form.value,
	success(res){
		console.log(res);
		uni.redirectTo({
				url:'/pages/login/login?phone='+form.value.mobile
			})
	
	},
	fail(res){
		console.log(res);
	}
})
	
}
</script>

<style>
@import '../../common/app.css';
.card {
	border-radius: 20px;
	background-color: #fff;
	margin: 30rpx;
	padding: 30rpx 20rpx;
}
.input_line {
	font-weight: 500;
	margin: 30rpx 10rpx;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
.input {
	border: 1px solid gray;
	padding: 10rpx 15rpx;
	border-radius: 20px;
	font-size: 20rpx;
	font-weight: 600;
}
.big_title {
	margin-left: 20rpx;
	font-weight: 600;
}
.upload-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}
.plus-icon {
	font-size: 40px;
	color: #ccc;
	margin-bottom: 10px;
}
.upload-text {
	font-size: 12px;
	color: #999;
}
.image {
	height: 300rpx;
	width: 150rpx;
	margin: 10rpx 10rpx;
}
</style>
